<template>
  <MyDialog
    title="设置管理员"
    show-cancel
    :visible="showDialog"
    :ok-loading="btnLoading"
    width="600px"
    @close="close"
    @ok="handleConfirmClick"
  >
    <el-form
      ref="baseForm"
      v-loading="loading"
      :model="modalFormData"
      label-suffix=":"
      label-width="100px"
      :rules="modalRules"
    >
      <el-form-item label="选择管理员" prop="managerId">
        <el-select 
          v-model="modalFormData.managerId"
          filterable
          remote
          reserve-keyword
          placeholder="搜索"
          :remote-method="remoteGetManager"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </MyDialog>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
import { DEVICE_TYPE } from "@/config/enum.js";
import { getUserList } from "@/api/user";
export default {
  mixins: [dialogMixin],
  props: {
    btnLoading: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      DEVICE_TYPE,
      loading: false,
      gradeList: [],
      modalFormData: {
        managerId: "",
      }, // 模态框表单数据
      modalRules: {
        managerId: [
          { required: true, message: "请选择管理员", trigger: "blur" },
        ],
      }, // 模态框表单验证规则
      options:[],
    };
  },
  mounted() {
    this.getManagrList();
  },
  methods: {
    getManagrList(keyWord){
      getUserList({
        pageNum:1,
        pageSize:50,
        keyWord:keyWord
      }).then((res) => {
        this.options = res.data.userList
      });
    },
    remoteGetManager(query){
      if(query){
        this.getManagrList(query)
      }
    },
    handleConfirmClick() {
      this.$refs.baseForm.validate((valid) => {
        if (valid) {
          this.$emit("confirm", this.modalFormData);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.input-number {
  ::v-deep .el-form-item__label {
    width: 180px !important;
  }
}
.input-number-row ::v-deep .input-number:last-child .el-form-item__label {
  width: 208px !important;
}
.icon {
  margin: 6px 0 0 20px;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}
</style>
